<template>
    <div class="offlineBooking">
      <div class="header">
        <van-nav-bar title="线下预约" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
      </div>
      <section class="offlineBooking_con">
        <h4>联系人信息</h4>
        <ul>
          <li class="offlineBooking_con_li">
            <p>姓名</p>
            <input type="text" placeholder="请输入姓名" v-model.trim='formData.aname'>
          </li>
          <li class="offlineBooking_con_li">
            <p>手机号码</p>
            <input type="number" placeholder="请输入手机号码" v-model.trim='formData.aphone' oninput="if(value.length>11) value=value.slice(0,11)" maxlength="11">
          </li>
          <li class="offlineBooking_con_li1">
            <p>期望看房时间</p>
            <div @click="popup()">
              <input type="text" id="time" placeholder="请选择看房时间" :value="currentdate" readonly="readonly" >
              <van-icon name="arrow-down" />
            </div>
          </li>
        </ul>
          <h4>备注</h4>
         <textarea type="text" placeholder="我的额外要求" rows="4" cols="20" v-model.trim='formData.userText'></textarea>
        <!--<h4>支付方式</h4>-->
        <!--<van-radio-group v-model="radio">-->
          <!--<van-radio name="1" checked-color="#10bf47">&nbsp;&nbsp;支付宝</van-radio>-->
          <!--<van-radio name="2" checked-color="#10bf47">&nbsp;&nbsp;微信</van-radio>-->
        <!--</van-radio-group>-->
        <van-button size="large" @click="getofflineBookingData()">提交</van-button>
        <!--时间-->
        <van-popup v-model="showImg" position="bottom">
          <van-datetime-picker
            v-bind="$attrs"
            v-model="currentDate"
            type="datetime"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            @cancel="cancel"
            @confirm="confirm"
          />
        </van-popup>

      </section>
    </div>
</template>

<script>
  export default {
    name: "offlineBooking",
    data() {
      return {
        showImg:false,
        minDate: new Date(1990,1,1),
        maxDate: new Date(2030,1,1),
        currentDate:new Date(),
        radio: '1',
        currentdate:'',
        formData: {
          aname: '',
          aphone: '',
          userText:'',
        },
        id:this.$route.query.id,
        farmId:'',
        userId:this.$cookies.get('user_id')||localStorage.getItem('user_id'),
      }
    },
    mounted() {


    },
    methods: {
      //返回
      onClickLeft() {
        this.$router.go(-1);
      },
      //打开时间模态框
      popup:function(){
        if(!this.showImg){
          this.showImg = true;
        }else{
          this.showImg = false;
        }
      },
      //关闭
      cancel(){
        this.showImg = false;
      },
      //确定时间
      confirm(v){
        var date = new Date(v)
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
       this.currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
          + " " + date.getHours() + seperator2 + date.getMinutes()
          + seperator2 + date.getSeconds();
        this.showImg=false;//点击确认后，show=false，组件隐藏掉，值已经传过去了
        return  this.currentdate;
      },
      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`;
        } else if (type === 'month') {
          return `${value}月`
        } else if (type === 'day') {
          return `${value}日`
        }
        return value;
      },

      //提交预约
      async getofflineBookingData() {
        let params = {
          user_id:this.userId,
          product_id:this.id,
          consigneeName:this.formData.aname,
          consigneePhone:this.formData.aphone,
          confirm_receipt_time:this.currentdate,
          buyer_message:this.formData.userText,
          lease_type:'1',
        };
        const res = await this.$axios.post(this.$api.offlineBookingBotton, params);
        if (res.success) {
          this.farmId=res.data.order_num
          this.toPay()
          // this.$router.push({path: '/rentalDdetails'})
        } else {
          this.$toast(res.msg);
        }
      },
      //跳转APP支付
      toPay() {
        var token = this.$cookies.get("token")||localStorage.getItem('token');
        let u = navigator.userAgent;
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        let params = {
          orderId: this.farmId,
          user_id: this.user_id,
        };
        if(!token){
          if (isAndroid) {
            console.warn("ecologylogin");
          } else if (isiOS) {
            window.webkit.messageHandlers.goBackLogin.postMessage(null);
          }
        }else {
          if (isAndroid) {
            console.warn('pay:' + this.farmId);
            this.$router.back();
          } else if (isiOS) {
            window.webkit.messageHandlers.flightPayment.postMessage(params);
          }
        }
      },






  }
  }

</script>

<style scoped>
.offlineBooking{height: 100vh;background-color: #fff;}
.offlineBooking_con{width: 100%;margin-top: 0.46rem;}
.offlineBooking_con h4{margin:0 0.16rem ;color: #000;font-size: 0.13rem;border-bottom: 1px solid #f2f2f2;padding: 0.15rem 0;}
.offlineBooking_con ul{padding: 0.1rem 0;}
.offlineBooking_con ul li{padding: 0 0.16rem;overflow: hidden;}
.offlineBooking_con ul li p{font-size: 0.13rem;color: #000;line-height: 0.46rem;display: inline-block;}
.offlineBooking_con_li input{border: 0;background-color: #f2f2f2;border-radius: 0.05rem;float: right;width: 70%;line-height: 0.4rem;padding-left: 0.1rem;}
.offlineBooking_con ul li:nth-child(1) input::placeholder{color: grey;}
.offlineBooking_con ul li:nth-child(2) input::placeholder{color: #000;}
.offlineBooking_con ul li:nth-child(3) input::placeholder{color: #000;}
.offlineBooking_con_li1 div{float: right;width: 70%;line-height: 0.4rem;padding-left: 0.1rem;border: 0;background-color: #f2f2f2;border-radius: 0.05rem;}
.offlineBooking_con_li1 div input{border: 0;background-color: #f2f2f2;width: 86%;}
textarea{margin: 0.16rem;border-radius: 0.1rem;background-color: #f2f2f2;width: 92%;border: 0;padding: 0.1rem;line-height: 0.2rem}
.van-radio{padding:0.1rem 0.16rem 0;}
.van-button{background-color: #10bf47;width: 90%;margin: 20% 5%;border-radius: 0.05rem;line-height: 0.4rem;color: #fff;}
</style>
